<template>
<!-- 项目模板骨架 -->
  <div>
    <div class="icard-main">
      <!-- 顶部功能菜单 -->
      <div class="fsb icard-title">
        <!-- title名称  插槽-->
        <div>
          <div class="icard-tip">{{title}}<slot name="title"></slot></div>
        </div>
        <!-- 搜索框 插槽 -->
        <div>
          <slot name="search"></slot>
          <!-- button  插槽-->
        </div>
        <div v-if="btnOpen">
          <div class="fsb icard-btn">
            <slot name="btn"></slot>
          </div>
        </div>
      </div>
      <!-- 内容区域 插槽 -->
      <div style="padding: 15px">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    btnOpen: {
      type: Boolean,
      default: false
    }
  },
  async created () {
  },
  methods: {
  },
  data () {
    return {
    }
  },
  watch: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
.icard-main {
  background-color: #fff;
  border: 1px solid #d4dce7;
}
.icard-title {
  height: 48px;
  background-color: #fafafc;
  border-bottom: 1px solid #d4dce7;
}
.icard-tip {
  height: 20px;
  line-height: 18px;
  padding-left: 15px;
  border-left: 3px solid @themeColor;
  color: #202d3d;
  font-size: 16px;
}
.icard-btn {
  margin-right: 20px;
}
</style>
